<template>
  <!-- 头部标签信息 -->
  <div class="homeHead">
    <HomeHead />
  </div>

  <!-- 首页模糊查询选框 -->
  <div class="indexSelectInput" @update="inputValue">
    <div class="selectInputModule">
      <span class="indexTitle">
        <el-icon color="#59d15f"><LocationInformation /></el-icon>
        {{ userLocal }}</span
      >
      <div class="indexselectInput">
        <div style="border: 3px solid #59d15f">
          <el-input
            v-model="selectInput"
            @input="$emit('update', selectInput)"
            style="width: 350px"
            placeholder="搜索闲置帮 商品/类型/地址"
            clearable
          />
          <el-button
            type="primary"
            style="
              border-radius: 0px;
              background-color: #59d15f;
              border-color: #59d15f;
            "
            :icon="Search"
            >搜索</el-button
          >
        </div>
        <div>
          <span style="font-size: 14px; color: #8d8d8d"
            >花生 大豆 平板 手机 电脑 显卡 漫画书 抽纸 中性笔</span
          >
        </div>
      </div>
    </div>
  </div>

  <!-- 首页导航栏 -->
  <div class="userMenuModule">
    <HomeMenu />
  </div>

  <!-- 轮播图设置 -->
  <div class="homeCarouselModule">
    <HomeCarousel />
  </div>
</template>

<script>
import HomeHead from "../components/HomeHead.vue";
import HomeMenu from "@/components/HomeMenu.vue";
import HomeCarousel from "@/components/HomeCarousel.vue";
import { Search, LocationInformation } from "@element-plus/icons-vue";
import { ref } from "vue";

export default {
  components: { HomeHead, HomeMenu, HomeCarousel, LocationInformation },
  setup() {
    let selectInput = ref("");
    let userLocal = ref("[ 当前城市 ]");

    return {
      Search,
      selectInput,
      userLocal,
    };
  },
};
</script>

<style>
body {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

/* 商品信息输入模块 */
.indexSelectInput {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20vh;
}

.selectInputModule {
  display: flex;
  align-items: center;
  width: 80%;
  height: 90%;
}

.indexTitle {
  display: flex;
  width: 35%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: "阿里妈妈刀隶体 Regular";
  font-size: 18px;
  color: #9c9c9c;
  font-weight: 500;
}

@font-face {
  font-family: "阿里妈妈刀隶体 Regular";
  font-weight: 400;
  src: url("//at.alicdn.com/wf/webfont/8nkNB4zy4gRH/ZZOtDoyBAzw0.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/8nkNB4zy4gRH/do2ZJIJo82p0.woff")
      format("woff");
  font-display: swap;
}

.indexselectInput {
  display: flex;
  flex-direction: column;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
}
</style>